<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>page组件</title>
    <style>
       div.page{
          font-size: 12px;
          font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
          color: #666;
          user-select: none;
       }
       div.page ul{
         padding: 0;
         margin:0;
       }
       div.page ul li{
         display: inline-block;
         min-width:30px;
         min-height:30px;
         border-radius:3px;
         line-height: 30px;
         text-align: center;
         margin: 0 6px;
         cursor: pointer;
       }
       div.page ul li.active{
         background: #1796e0;
         color:#fff;
       }
       div.page ul li.disable{
         color: #ccc;
       }
     
    </style>
</head>
<body>
  <div id="app">
      <page :pagesize="pageSize" :page="page" :total="total" @pageChange="pageChange"></page>
  </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
      Vue.component('page',{
        props:{
             total:{
               type:[Number,String],
               default:0
             },
             pagesize:{
               type:[Number,String],
               default:1
             },
             page:{
               type:[Number,String],
               default:0
             }
        },
        template:'<div class="page">'+
              '<ul>'+
                '<li :class="page==1?\'disable\':\'\'" @click="prev">上一页</li>'+
                '<li @click="toFirst">首页</li>'+
                '<li v-for="item in list"  :class="[item==page?\'active\':\'\']"  @click="handleClick">'+
                  '{{item}}'+
                '</li>'+
                '<li @click="toEnd">尾页</li>'+
                '<li :class="page==totalCount?\'disable\':\'\'" @click="next">下一页</li>'+
                '<li>总共{{totalCount}}页</li>'+
              '</ul>'+
            '</div>',
        data(){
          return {
            totalCount:0      //总页数
          }
        },
        computed:{
          list(){
            let list=[];
            //计算总页数
            this.totalCount=Math.ceil(this.total/this.pagesize);

            //超限控制
            if(this.page<=0){              
              this.page=1;
            }   
            if(this.page>this.totalCount){
              this.page=this.totalCount;
            }

            //计算显示页码
            if(this.totalCount>5){
              if(this.page>2&&this.page<this.totalCount-2){
                   list=[this.page-2,this.page-1,this.page,this.page+1,this.page+2];
              }else if(this.page<=2&&this.page>0){
                for(let i=1;i<=5;i++){
                  list.push(i);
                }  
              }else if(this.page>=this.totalCount-2&&this.page<=this.totalCount){
                for(let i=4;i>=0;i--){
                  list.push(this.totalCount-i);
                }
              }
            }else{
              for(let i = 1;i<=this.totalCount;i++){
                list.push(i);
              }
            }
            return list;
          }
        },

        methods:{
             handleClick(e){
               let page=parseInt(e.target.innerText);
               let {count,total }=this;
               this.$emit('pagechange',{page,count,total});
             },
             prev(e){
               if(!e.target.classList.contains['disable']){
                   this.page>1&&this.page--;
                   let {page,count,total }=this;
                   this.$emit('pagechange',{page,count,total});
               }
             },
             next(e){
              if(!e.target.classList.contains['disable']){
                   this.page<this.totalCount&&this.page++;
                   let {page,pagesize,total }=this;
                   this.$emit('pagechange',{page,pagesize,total});
               }
             },
             toFirst(){
                let {page,pagesize,total }=this;
                this.$emit('pagechange',{page:1,pagesize,total});
             },
             toEnd(){
              let {page,pagesize,total }=this;
              this.$emit('pagechange',{page:this.totalCount,pagesize,total});
             }
         } 

      });
    
      new Vue({
        el:'#app',
        data:{
            page:1,
            pageSize:5,
            total:100
        },
        methods:{
          pageChange(e){
            this.page=e.page;
          }
        }
      })
    
    
    
    
    </script>
</body>
</html>